<include file="/public/header" />
<div class="layui-fluid">
  <div class="layui-card">
    <!-- // 默认操作按钮 -->
    <div class="layui-card-header layadmin-card-header-auto ">
      <div class="layui-form">
        <div class="layui-form-item">

          <div class="layui-inline">
            <div class="layui-input-inline ">
              <select name="status">
                <option value="">{:__('按状态查看')}</option>
                <option value="2">{:__('已审核')}</option>
                <option value="1">{:__('未审核')}</option>
              </select>
            </div>
          </div>

          <div class="layui-inline">
            <div class="layui-input-inline ">
              <input name="filename" class="layui-input" type="text" placeholder="{:__('关键字查询')}" />
            </div>
          </div>
          <div class="layui-inline">
            <!-- // 默认搜索 -->
            <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
                    class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- // 创建数据表实例 -->
    <table id="lay-tableList" lay-filter="lay-tableList"></table>
  </div>
</div>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
  <a class="layui-table-text" data-url="{{d.url}}" lay-event="choose" >{:__('选择')}</a>
</script>

<include file="/public/footer" />
<script>
  layui.use(['table', 'layer','admin','jquery'], function () {

    var $ = layui.jquery;
    var layer = layui.layer;
    var table = layui.table;
    var admin = layui.admin;
    /*
     * 初始化表格
    */
    var isTable = table.render({
      elem: "#lay-tableList"
      , url: "{:url('/system.attachment/index')}"
      , page: true
      , limit: 18
      , cols: [[
        { type: 'checkbox', width: 50 },
        { field: 'id', align: 'center', sort: true, width: 80, title: 'ID' },
        { field: 'filename', align: 'left', title: '{:__("名称")}' },
        {
          field: 'url', align: 'left', align: 'center', width: 180, templet: function (d) {
            return '<a href="' + d.url + '" target="_blank" ><img class="filesuffix" lay-image-hover data-size="150,150" src="' + admin.utils.filesuffix(d.url) + '"></a>';
          },
          title: '{:__("预览")}'
        },
        { field: 'filesize', align: 'left', title: '{:__("大小")}' },
        { field: 'suffix', align: 'left', title: '{:__("后缀")}' },
        { field: 'create_time', align: 'center', width: 180, title: '{:__("创建时间")}' },
        { align: 'center', toolbar: '#tableBar', width: 160, title: '{:__("操作")}' },
      ]]
    })

    /**
     * 选择文件
     */
    table.on('tool(lay-tableList)', function(obj){
      let field = $('#parent_choose_field').val() || undefined;
      let type = $('#parent_choose_type').val() || undefined;
      if (!field) {
          return layer.info('图片信息不存在');
      }

      if (type === 'images') {
        let o = parent.layui.$('img.' + field);
        o.prop('src', obj.data.url);
        o.parent('div').removeClass('layui-hide');
        parent.layui.$(o).parents('.layui-upload-drag').find('p,i,hr').addClass('layui-hide');
        parent.layui.$('input.'+field).val(obj.data.url);
      } else if (type === 'multiple') {
        let boxList = parent.layui.$('.layui-imagesbox .layui-input-inline');
        let length = boxList.length;
        $(boxList).each(function (i, item) {
          $(item).find('input.layui-hide').prop('name', field + '[' + i + '][src]');
          $(item).find('input.layui-input').prop('name', field + '[' + i + '][title]');
        })

        let html = '<div class="layui-input-inline layui-uplpad-image">';
        html += '<img src="' + obj.data.url + '" >';
        html += '<input type="text" name="' + field + '[' + (length - 1) + '][src]" class="layui-hide" value="' + obj.data.url + '">';
        html += '<input type="text" name="' + field + '[' + (length - 1) + '][title]" class="layui-input" placeholder="图片简介">';
        html += '<span class="layui-badge layui-badge-red" onclick="layui.$(this).parent().remove();">删除</span></div>';
        let elem = parent.layui.$('[lay-upload="' + field + '"]');
        parent.layui.$(elem).parent().before(html);
      } else {
        parent.layui.$('input.'+field).val(obj.data.url);
      }
      parent.layer.closeAll();
    });

  })
</script>